import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import TrendingUp from "@material-ui/icons/TrendingUp";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Info from "components/Typography/Info.js";
import Danger from "components/Typography/Danger.js";
import Success from "components/Typography/Success.js";
import Button from "components/CustomButtons/Button.js";

import sectionBlogStyle from "assets/jss/nextjs-material-kit-pro/pages/blogPostsSections/sectionBlogStyle.js";

import cardBlog4 from "assets/img/examples/card-blog4.jpg";
import office2 from "assets/img/office2.jpg";
import blog1 from "assets/img/examples/blog1.jpg";
import blog2 from "assets/img/examples/blog2.jpg";
import blog3 from "assets/img/examples/blog3.jpg";
import blog4 from "assets/img/examples/blog4.jpg";
import blog5 from "assets/img/examples/blog5.jpg";
import blog6 from "assets/img/examples/blog6.jpg";
import blog7 from "assets/img/examples/blog7.jpg";
import blog8 from "assets/img/examples/blog8.jpg";

// own
import Router from "next/router";
import { connect, useDispatch, useSelector } from "react-redux";
import { Creators as ArticleCreators } from "redux/actions/article";
import { END } from "redux-saga";
import { wrapper } from "redux/store";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn"; // 按需加载
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.locale("zh-cn"); // 全局使用中文
dayjs.extend(relativeTime);

const useStyles = makeStyles(sectionBlogStyle);

export default function SectionBlogs({ posts, count }) {
  const classes = useStyles();
  return (
    <div className={classes.section}>
      <div className={classes.blog}>
        <div className={classes.container}>
          <GridContainer>
            <GridItem
              xs={12}
              sm={10}
              md={10}
              className={classes.mlAuto + " " + classes.mrAuto}
            >
              {console.log("posts===========>", posts)}
              <h2 className={classes.title}>
                精选文章 {count && `共 ${count} 篇`}
              </h2>
              <br />
              {/* </GridItem> */}
              {posts ? (
                posts?.map((post) => (
                  <Card plain blog className={classes.card} key={post.aid}>
                    <GridContainer>
                      <GridItem xs={12} sm={4} md={4}>
                        <CardHeader image plain>
                          <a
                            href="#pablito"
                            onClick={() =>
                              Router.push(`/article/p?sn=${post.article_sn}`)
                            }
                            // onClick={(e) => e.preventDefault()}
                          >
                            {post.cover !== "" ? (
                              <img src={post.cover} alt="..." />
                            ) : (
                              <img src={blog8} alt="..." />
                            )}
                          </a>
                          <div
                            className={classes.coloredShadow}
                            style={{
                              backgroundImage: `url(${post.cover})`,
                              opacity: "1",
                            }}
                          />
                          <div
                            className={classes.coloredShadow}
                            style={{
                              backgroundImage: `url(${post.cover})`,
                              opacity: "1",
                            }}
                          />
                        </CardHeader>
                      </GridItem>
                      <GridItem xs={12} sm={8} md={8}>
                        {/* <Success>
                          <h6 className={classes.cardCategory}>STARTUPS</h6>
                        </Success> */}
                        <h3 className={classes.cardTitle}>
                          <a
                            href="#pablo"
                            onClick={() =>
                              Router.push(`/article/p?sn=${post.article_sn}`)
                            }
                          >
                            {post.title}
                          </a>
                        </h3>
                        <p className={classes.description}>
                          {post.content.substring(0, 200) + "..."}
                          <a
                            href="#pablo"
                            onClick={() =>
                              Router.push(`/article/p?sn=${post.article_sn}`)
                            }
                          >
                            {" "}
                            阅读更多{" "}
                          </a>
                        </p>
                        <p className={classes.author}>
                          by{" "}
                          <a
                            href="#pablo"
                            onClick={() =>
                              Router.push(`/article/p?sn=${post.article_sn}`)
                            }
                          >
                            <b>{post.author_name}</b>
                          </a>{" "}
                          , {dayjs(post.created_at).fromNow()}
                        </p>
                      </GridItem>
                    </GridContainer>
                  </Card>
                ))
              ) : (
                <Card plain blog className={classes.card}>
                  <GridContainer>
                    <GridItem xs={12} sm={4} md={4}>
                      <CardHeader image plain>
                        <a href="#pablito" onClick={(e) => e.preventDefault()}>
                          <img src={blog8} alt="..." />
                        </a>
                        <div
                          className={classes.coloredShadow}
                          style={{
                            backgroundImage: `url(${blog8})`,
                            opacity: "1",
                          }}
                        />
                        <div
                          className={classes.coloredShadow}
                          style={{
                            backgroundImage: `url(${blog8})`,
                            opacity: "1",
                          }}
                        />
                      </CardHeader>
                    </GridItem>
                    <GridItem xs={12} sm={8} md={8}>
                      <Success>
                        <h6 className={classes.cardCategory}>STARTUPS</h6>
                      </Success>
                      <h3 className={classes.cardTitle}>
                        <a href="#pablo" onClick={(e) => e.preventDefault()}>
                          Lyft launching cross-platform service this week
                        </a>
                      </h3>
                      <p className={classes.description}>
                        Like so many organizations these days, Autodesk is a
                        company in transition. It was until recently a
                        traditional boxed software company selling licenses.
                        Today, it’s moving to a subscription model. Yet its own
                        business model disruption is only part of the story —
                        and…
                        <a href="#pablo" onClick={(e) => e.preventDefault()}>
                          {" "}
                          Read More{" "}
                        </a>
                      </p>
                      <p className={classes.author}>
                        by{" "}
                        <a href="#pablo" onClick={(e) => e.preventDefault()}>
                          <b>Megan Rose</b>
                        </a>{" "}
                        , 2 days ago
                      </p>
                    </GridItem>
                  </GridContainer>
                </Card>
              )}
            </GridItem>
          </GridContainer>
        </div>
      </div>
    </div>
  );
}
